<!--
 * @author: sanbao
 * @Date: 2022-08-08 19:00:20
-->
<style lang='scss' scoped>
.chart {
  height: calc(100vh - 150px);
  overflow: auto;
  padding: 20px;
  .noe {
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    .xiangqing {
      flex: 1;
      padding: 20px;
      .title {
        padding: 20px;
        box-sizing: border-box;
        background-color: #597de6;
        border-radius: 5px;
        color: #fff;
        > p {
          font-size: 24px;
          margin-top: 10px;
        }
      }
      .list {
        display: flex;
        justify-content: space-between;
        padding: 15px 0;
        border-bottom: 1px solid #ccc;
        align-items: center;

        > :nth-child(1) {
          border-left: 6px solid #409eff;
          font-size: 14px;
          font-weight: 200;
          padding: 5px 0;
          padding-left: 10px;
        }
        > :nth-child(2) {
          display: flex;
          align-items: center;
        }
        .listtwo {
          border-left: 6px solid #5aea00;
        }
        .listsom {
          border-left: 6px solid #e98513;
        }
      }
    }
    #my_echarts {
      flex: 3;
      min-height: 350px;
    }
  }
  .tow {
    margin-top: 30px;
    height: 450px;
    display: flex;
    #my_echartsleft {
      height: 100%;
      flex: 2;
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
      margin-right: 20px;
      border-radius: 10px;
    }
    #my_echartsright {
      flex: 1;
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
      border-radius: 10px;
    }
  }
  .three {
    margin-top: 30px;
    height: 600px;
    display: flex;
    .threeleft {
      flex: 1;
      #threelefttop {
        height: 48%;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
        margin-bottom: 24px;
        border-radius: 10px;
      }
      #threeleftbuttom {
        height: 48%;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
        border-radius: 10px;
      }
    }
    #threeright {
      flex: 4;
      margin-left: 20px;
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
      border-radius: 10px;
    }
  }
  .four {
    margin-top: 30px;
    height: 797px;
    display: flex;
    #fourleft {
      flex: 3;
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
      height: 100%;
      border-radius: 10px;
      margin-right: 20px;
      .board {
        width: 100% !important;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
      }
    }
    #fourright {
      flex: 1;
      height: 100%;
      > div {
        height: 116px;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
        margin-bottom: 20px;
        border-radius: 10px;
        padding: 8px 20px;
        box-sizing: border-box;
        h2 {
          font-weight: 400;
          font-size: 22px;
        }
        p {
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          > :nth-child(1) {
            color: #ccc;
          }
          > :nth-child(2) {
            color: rgb(4, 250, 74);
          }
        }
      }
      .active {
        border-left: 10px solid #5871e1;
      }
    }
  }
}
</style>

<template>
  <div class="chart">
    <div class="noe">
      <div class="xiangqing">
        <div class="title">
          <span>本月累计收益（万元）</span>
          <p>¥ {{ charttrendlist.allAmount }}</p>
        </div>
        <div class="list">
          <span>今日新增收益</span>
          <span>
            <h2>{{ charttrendlist.tadayAdded }}</h2>
            <span> 万元</span>
          </span>
        </div>
        <div class="list">
          <span class="listtwo">今日新增支出</span>
          <span>
            <h2>{{ charttrendlist.tadaySub }}</h2>
            <span> 万元</span>
          </span>
        </div>
        <div class="list">
          <span class="listsom">今日结余</span>
          <span>
            <h2>{{ charttrendlist.tadayAmount }}</h2>
            <span> 万元</span>
          </span>
        </div>
      </div>
      <div id="my_echarts"></div>
    </div>
    <div class="tow">
      <div id="my_echartsleft"></div>
      <div id="my_echartsright"></div>
    </div>
    <div class="three">
      <div class="threeleft">
        <div id="threelefttop"></div>
        <div id="threeleftbuttom"></div>
      </div>
      <div id="threeright">
        <baidu v-model:longitude="asd" v-model:latitude="sss"> </baidu>
      </div>
    </div>
    <div class="four">
      <div id="fourleft">
        <div demo-bg>
          <dv-scroll-board
            :config="config"
            style="width: 500px; height: 797px"
            class="board"
          />
        </div>
      </div>
      <div id="fourright">
        <div
          v-for="(item, index) in chartregions"
          :key="index"
          @click="tab(item.id)"
          :class="{ active: tabID == item.id }"
        >
          <h2>{{ item.title }}</h2>
          <p>
            <span>今日汇率</span>
            <span>{{ item.receivable }}（万元）</span>
          </p>
          <p>
            <span>今日结余</span>
            <span>{{ item.balance }}（万元）</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
} from "vue";
import * as echarts from "echarts";
import EchartsModel from "../../api/ecgarts";
import Baidu from "../../components/baidu.vue";
export default defineComponent({
  components: { Baidu },
  setup() {
    //页面挂载
    onMounted(() => {
      // 数据
      getcharttrend();
      getcharttimeamount();
      chartsheets();
      chartregions();
      //调用echarts函数
      getechartsnoe();
      getechartstow();
      echartsright();
      threelefttop();
      threeleftbuttom();
    });
    const data = reactive({
      charttrendlist: [],
      echartstowlist: {
        income: [],
      },
      sss: 39.91814,
      asd: 116.397389,
      chartregions: [],
      tabID: 1,
    });
    const config = reactive({
      header: ["省份", "城市", "覆盖率", "今日应收", "今日实收", "今日结算"],
      data: [],
      index: true,
      columnWidth: [50],
      align: ["center"],
    });
    // noe
    const getcharttrend = async () => {
      const response = await EchartsModel.getcharttrend();
      if (response.data.code == 200) {
        data.charttrendlist = response.data.data;
      }
    };
    const getechartsnoe = () => {
      let myChart = echarts.init(document.getElementById("my_echarts"));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          data: ["月累计收益", "日收益曲线"],
        },
        xAxis: [
          {
            type: "category",
            data: ["2022-4", "2022-5", "2022-5", "2022-6", "2022=7", "2022-8"],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 180,
            interval: 30,
            axisLabel: {
              formatter: "{value} 万元",
            },
          },
          {},
        ],
        series: [
          {
            name: "月累计收益",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " 万元";
              },
            },
            data: [112.06, 125.35, 74.89, 135.71, 90.1, 75.03],
          },
          {
            name: "日收益曲线",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + " 万元";
              },
            },
            data: [52.33, 95.08, 133.64, 109.6, 63.3, 124.37],
          },
        ],
      });
      window.onresize = function () {
        myChart.resize();
      };
    };
    // two
    const getcharttimeamount = async () => {
      const response = await EchartsModel.getcharttimeamount();
      // if (response.data.code == 200) {
      //   response.data.data.result.forEach((v) => {
      //     data.echartstowlist.income.push(Number(v.timeStr));
      //   });
      //   console.log(data.echartstowlist.income);
      // }
    };
    const getechartstow = () => {
      let myChart = echarts.init(document.getElementById("my_echartsleft"));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["收益（万元）", "支出（万元）", "结余（万元）"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "value",
          },
        ],
        yAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            data: ["21点", "18点", "15点", "12点", "9点", "6点", "3点", "0点"],
          },
        ],
        series: [
          {
            name: "收益（万元）",
            type: "bar",
            label: {
              show: true,
              position: "inside",
            },
            emphasis: {
              focus: "series",
            },
            data: [3.61, 7.02, 2.87, 5.58, 2.71, 9.31, 2.2, 1.15],
          },
          {
            name: "支出（万元）",
            type: "bar",
            stack: "Total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [5.47, 9.25, 1.94, 1.08, 5.77, 4.81, 4.34, 3.13],
          },
          {
            name: "结余（万元）",
            type: "bar",
            stack: "Total",
            label: {
              show: true,
              position: "left",
            },
            emphasis: {
              focus: "series",
            },
            data: [4.5, -1.17, 1.17, 1.17, 0.21, 4.64, 0.88, 6.06],
          },
        ],
      });
      window.onresize = function () {
        myChart.resize();
      };
    };
    const echartsright = () => {
      let myChart = echarts.init(document.getElementById("my_echartsright"));
      const dateList = [
        ["2017-1-1", "初四"],
        ["2017-1-2", "初五"],
        ["2017-1-3", "初六"],
        ["2017-1-4", "初七"],
        ["2017-1-5", "初八", "小寒"],
        ["2017-1-6", "初九"],
        ["2017-1-7", "初十"],
        ["2017-1-8", "十一"],
        ["2017-1-9", "十二"],
        ["2017-1-10", "十三"],
        ["2017-1-11", "十四"],
        ["2017-1-12", "十五"],
        ["2017-1-13", "十六"],
        ["2017-1-14", "十七"],
        ["2017-1-15", "十八"],
        ["2017-1-16", "十九"],
        ["2017-1-17", "二十"],
        ["2017-1-18", "廿一"],
        ["2017-1-19", "廿二"],
        ["2017-1-20", "廿三", "大寒"],
        ["2017-1-21", "廿四"],
        ["2017-1-22", "廿五"],
        ["2017-1-23", "廿六"],
        ["2017-1-24", "廿七"],
        ["2017-1-25", "廿八"],
        ["2017-1-26", "廿九"],
        ["2017-1-27", "三十"],
        ["2017-1-28", "正月"],
        ["2017-1-29", "初二"],
        ["2017-1-30", "初三"],
        ["2017-1-31", "初四"],
        ["2017-2-1", "初五"],
        ["2017-2-2", "初六"],
        ["2017-2-3", "初七", "立春"],
        ["2017-2-4", "初八"],
        ["2017-2-5", "初九"],
        ["2017-2-6", "初十"],
        ["2017-2-7", "十一"],
        ["2017-2-8", "十二"],
        ["2017-2-9", "十三"],
        ["2017-2-10", "十四"],
        ["2017-2-11", "十五"],
        ["2017-2-12", "十六"],
        ["2017-2-13", "十七"],
        ["2017-2-14", "十八"],
        ["2017-2-15", "十九"],
        ["2017-2-16", "二十"],
        ["2017-2-17", "廿一"],
        ["2017-2-18", "廿二", "雨水"],
        ["2017-2-19", "廿三"],
        ["2017-2-20", "廿四"],
        ["2017-2-21", "廿五"],
        ["2017-2-22", "廿六"],
        ["2017-2-23", "廿七"],
        ["2017-2-24", "廿八"],
        ["2017-2-25", "廿九"],
        ["2017-2-26", "二月"],
        ["2017-2-27", "初二"],
        ["2017-2-28", "初三"],
        ["2017-3-1", "初四"],
        ["2017-3-2", "初五"],
        ["2017-3-3", "初六"],
        ["2017-3-4", "初七"],
        ["2017-3-5", "初八", "驚蟄"],
        ["2017-3-6", "初九"],
        ["2017-3-7", "初十"],
        ["2017-3-8", "十一"],
        ["2017-3-9", "十二"],
        ["2017-3-10", "十三"],
        ["2017-3-11", "十四"],
        ["2017-3-12", "十五"],
        ["2017-3-13", "十六"],
        ["2017-3-14", "十七"],
        ["2017-3-15", "十八"],
        ["2017-3-16", "十九"],
        ["2017-3-17", "二十"],
        ["2017-3-18", "廿一"],
        ["2017-3-19", "廿二"],
        ["2017-3-20", "廿三", "春分"],
        ["2017-3-21", "廿四"],
        ["2017-3-22", "廿五"],
        ["2017-3-23", "廿六"],
        ["2017-3-24", "廿七"],
        ["2017-3-25", "廿八"],
        ["2017-3-26", "廿九"],
        ["2017-3-27", "三十"],
        ["2017-3-28", "三月"],
        ["2017-3-29", "初二"],
        ["2017-3-30", "初三"],
        ["2017-3-31", "初四"],
        ["2017-4-1", "初五"],
        ["2017-4-2", "初六"],
        ["2017-4-3", "初七"],
        ["2017-4-4", "初八", "清明"],
        ["2017-4-5", "初九"],
        ["2017-4-6", "初十"],
        ["2017-4-7", "十一"],
        ["2017-4-8", "十二"],
        ["2017-4-9", "十三"],
        ["2017-4-10", "十四"],
        ["2017-4-11", "十五"],
        ["2017-4-12", "十六"],
        ["2017-4-13", "十七"],
        ["2017-4-14", "十八"],
        ["2017-4-15", "十九"],
        ["2017-4-16", "二十"],
        ["2017-4-17", "廿一"],
        ["2017-4-18", "廿二"],
        ["2017-4-19", "廿三"],
        ["2017-4-20", "廿四", "穀雨"],
        ["2017-4-21", "廿五"],
        ["2017-4-22", "廿六"],
        ["2017-4-23", "廿七"],
        ["2017-4-24", "廿八"],
        ["2017-4-25", "廿九"],
        ["2017-4-26", "四月"],
        ["2017-4-27", "初二"],
        ["2017-4-28", "初三"],
        ["2017-4-29", "初四"],
        ["2017-4-30", "初五"],
        ["2017-5-1", "初六"],
        ["2017-5-2", "初七"],
        ["2017-5-3", "初八"],
        ["2017-5-4", "初九"],
        ["2017-5-5", "初十", "立夏"],
        ["2017-5-6", "十一"],
        ["2017-5-7", "十二"],
        ["2017-5-8", "十三"],
        ["2017-5-9", "十四"],
        ["2017-5-10", "十五"],
        ["2017-5-11", "十六"],
        ["2017-5-12", "十七"],
        ["2017-5-13", "十八"],
        ["2017-5-14", "十九"],
        ["2017-5-15", "二十"],
        ["2017-5-16", "廿一"],
        ["2017-5-17", "廿二"],
        ["2017-5-18", "廿三"],
        ["2017-5-19", "廿四"],
        ["2017-5-20", "廿五"],
        ["2017-5-21", "廿六", "小滿"],
        ["2017-5-22", "廿七"],
        ["2017-5-23", "廿八"],
        ["2017-5-24", "廿九"],
        ["2017-5-25", "三十"],
        ["2017-5-26", "五月"],
        ["2017-5-27", "初二"],
        ["2017-5-28", "初三"],
        ["2017-5-29", "初四"],
        ["2017-5-30", "初五"],
        ["2017-5-31", "初六"],
        ["2017-6-1", "初七"],
        ["2017-6-2", "初八"],
        ["2017-6-3", "初九"],
        ["2017-6-4", "初十"],
        ["2017-6-5", "十一", "芒種"],
        ["2017-6-6", "十二"],
        ["2017-6-7", "十三"],
        ["2017-6-8", "十四"],
        ["2017-6-9", "十五"],
        ["2017-6-10", "十六"],
        ["2017-6-11", "十七"],
        ["2017-6-12", "十八"],
        ["2017-6-13", "十九"],
        ["2017-6-14", "二十"],
        ["2017-6-15", "廿一"],
        ["2017-6-16", "廿二"],
        ["2017-6-17", "廿三"],
        ["2017-6-18", "廿四"],
        ["2017-6-19", "廿五"],
        ["2017-6-20", "廿六"],
        ["2017-6-21", "廿七", "夏至"],
        ["2017-6-22", "廿八"],
        ["2017-6-23", "廿九"],
        ["2017-6-24", "六月"],
        ["2017-6-25", "初二"],
        ["2017-6-26", "初三"],
        ["2017-6-27", "初四"],
        ["2017-6-28", "初五"],
        ["2017-6-29", "初六"],
        ["2017-6-30", "初七"],
        ["2017-7-1", "初八"],
        ["2017-7-2", "初九"],
        ["2017-7-3", "初十"],
        ["2017-7-4", "十一"],
        ["2017-7-5", "十二"],
        ["2017-7-6", "十三"],
        ["2017-7-7", "十四", "小暑"],
        ["2017-7-8", "十五"],
        ["2017-7-9", "十六"],
        ["2017-7-10", "十七"],
        ["2017-7-11", "十八"],
        ["2017-7-12", "十九"],
        ["2017-7-13", "二十"],
        ["2017-7-14", "廿一"],
        ["2017-7-15", "廿二"],
        ["2017-7-16", "廿三"],
        ["2017-7-17", "廿四"],
        ["2017-7-18", "廿五"],
        ["2017-7-19", "廿六"],
        ["2017-7-20", "廿七"],
        ["2017-7-21", "廿八"],
        ["2017-7-22", "廿九", "大暑"],
        ["2017-7-23", "閏六"],
        ["2017-7-24", "初二"],
        ["2017-7-25", "初三"],
        ["2017-7-26", "初四"],
        ["2017-7-27", "初五"],
        ["2017-7-28", "初六"],
        ["2017-7-29", "初七"],
        ["2017-7-30", "初八"],
        ["2017-7-31", "初九"],
        ["2017-8-1", "初十"],
        ["2017-8-2", "十一"],
        ["2017-8-3", "十二"],
        ["2017-8-4", "十三"],
        ["2017-8-5", "十四"],
        ["2017-8-6", "十五"],
        ["2017-8-7", "十六", "立秋"],
        ["2017-8-8", "十七"],
        ["2017-8-9", "十八"],
        ["2017-8-10", "十九"],
        ["2017-8-11", "二十"],
        ["2017-8-12", "廿一"],
        ["2017-8-13", "廿二"],
        ["2017-8-14", "廿三"],
        ["2017-8-15", "廿四"],
        ["2017-8-16", "廿五"],
        ["2017-8-17", "廿六"],
        ["2017-8-18", "廿七"],
        ["2017-8-19", "廿八"],
        ["2017-8-20", "廿九"],
        ["2017-8-21", "三十"],
        ["2017-8-22", "七月"],
        ["2017-8-23", "初二", "處暑"],
        ["2017-8-24", "初三"],
        ["2017-8-25", "初四"],
        ["2017-8-26", "初五"],
        ["2017-8-27", "初六"],
        ["2017-8-28", "初七"],
        ["2017-8-29", "初八"],
        ["2017-8-30", "初九"],
        ["2017-8-31", "初十"],
        ["2017-9-1", "十一"],
        ["2017-9-2", "十二"],
        ["2017-9-3", "十三"],
        ["2017-9-4", "十四"],
        ["2017-9-5", "十五"],
        ["2017-9-6", "十六"],
        ["2017-9-7", "十七", "白露"],
        ["2017-9-8", "十八"],
        ["2017-9-9", "十九"],
        ["2017-9-10", "二十"],
        ["2017-9-11", "廿一"],
        ["2017-9-12", "廿二"],
        ["2017-9-13", "廿三"],
        ["2017-9-14", "廿四"],
        ["2017-9-15", "廿五"],
        ["2017-9-16", "廿六"],
        ["2017-9-17", "廿七"],
        ["2017-9-18", "廿八"],
        ["2017-9-19", "廿九"],
        ["2017-9-20", "八月"],
        ["2017-9-21", "初二"],
        ["2017-9-22", "初三"],
        ["2017-9-23", "初四", "秋分"],
        ["2017-9-24", "初五"],
        ["2017-9-25", "初六"],
        ["2017-9-26", "初七"],
        ["2017-9-27", "初八"],
        ["2017-9-28", "初九"],
        ["2017-9-29", "初十"],
        ["2017-9-30", "十一"],
        ["2017-10-1", "十二"],
        ["2017-10-2", "十三"],
        ["2017-10-3", "十四"],
        ["2017-10-4", "十五"],
        ["2017-10-5", "十六"],
        ["2017-10-6", "十七"],
        ["2017-10-7", "十八"],
        ["2017-10-8", "十九", "寒露"],
        ["2017-10-9", "二十"],
        ["2017-10-10", "廿一"],
        ["2017-10-11", "廿二"],
        ["2017-10-12", "廿三"],
        ["2017-10-13", "廿四"],
        ["2017-10-14", "廿五"],
        ["2017-10-15", "廿六"],
        ["2017-10-16", "廿七"],
        ["2017-10-17", "廿八"],
        ["2017-10-18", "廿九"],
        ["2017-10-19", "三十"],
        ["2017-10-20", "九月"],
        ["2017-10-21", "初二"],
        ["2017-10-22", "初三"],
        ["2017-10-23", "初四", "霜降"],
        ["2017-10-24", "初五"],
        ["2017-10-25", "初六"],
        ["2017-10-26", "初七"],
        ["2017-10-27", "初八"],
        ["2017-10-28", "初九"],
        ["2017-10-29", "初十"],
        ["2017-10-30", "十一"],
        ["2017-10-31", "十二"],
        ["2017-11-1", "十三"],
        ["2017-11-2", "十四"],
        ["2017-11-3", "十五"],
        ["2017-11-4", "十六"],
        ["2017-11-5", "十七"],
        ["2017-11-6", "十八"],
        ["2017-11-7", "十九", "立冬"],
        ["2017-11-8", "二十"],
        ["2017-11-9", "廿一"],
        ["2017-11-10", "廿二"],
        ["2017-11-11", "廿三"],
        ["2017-11-12", "廿四"],
        ["2017-11-13", "廿五"],
        ["2017-11-14", "廿六"],
        ["2017-11-15", "廿七"],
        ["2017-11-16", "廿八"],
        ["2017-11-17", "廿九"],
        ["2017-11-18", "十月"],
        ["2017-11-19", "初二"],
        ["2017-11-20", "初三"],
        ["2017-11-21", "初四"],
        ["2017-11-22", "初五", "小雪"],
        ["2017-11-23", "初六"],
        ["2017-11-24", "初七"],
        ["2017-11-25", "初八"],
        ["2017-11-26", "初九"],
        ["2017-11-27", "初十"],
        ["2017-11-28", "十一"],
        ["2017-11-29", "十二"],
        ["2017-11-30", "十三"],
        ["2017-12-1", "十四"],
        ["2017-12-2", "十五"],
        ["2017-12-3", "十六"],
        ["2017-12-4", "十七"],
        ["2017-12-5", "十八"],
        ["2017-12-6", "十九"],
        ["2017-12-7", "二十", "大雪"],
        ["2017-12-8", "廿一"],
        ["2017-12-9", "廿二"],
        ["2017-12-10", "廿三"],
        ["2017-12-11", "廿四"],
        ["2017-12-12", "廿五"],
        ["2017-12-13", "廿六"],
        ["2017-12-14", "廿七"],
        ["2017-12-15", "廿八"],
        ["2017-12-16", "廿九"],
        ["2017-12-17", "三十"],
        ["2017-12-18", "十一月"],
        ["2017-12-19", "初二"],
        ["2017-12-20", "初三"],
        ["2017-12-21", "初四"],
        ["2017-12-22", "初五", "冬至"],
        ["2017-12-23", "初六"],
        ["2017-12-24", "初七"],
        ["2017-12-25", "初八"],
        ["2017-12-26", "初九"],
        ["2017-12-27", "初十"],
        ["2017-12-28", "十一"],
        ["2017-12-29", "十二"],
        ["2017-12-30", "十三"],
        ["2017-12-31", "十四"],
      ];
      let heatmapData = [];
      let lunarData = [];
      for (let i = 0; i < dateList.length; i++) {
        heatmapData.push([dateList[i][0], Math.random() * 300]);
        lunarData.push([dateList[i][0], 1, dateList[i][1], dateList[i][2]]);
      }
      myChart.setOption({
        tooltip: {
          formatter: function (params) {
            return "降雨量: " + params.value[1].toFixed(2);
          },
        },
        visualMap: {
          show: false,
          min: 0,
          max: 300,
          calculable: true,
          seriesIndex: [2],
          orient: "horizontal",
          left: "center",
          bottom: 20,
          inRange: {
            color: ["#e0ffff", "#006edd"],
            opacity: 0.3,
          },
          controller: {
            inRange: {
              opacity: 0.5,
            },
          },
        },
        calendar: [
          {
            left: "center",
            top: "middle",
            cellSize: [70, 70],
            yearLabel: { show: false },
            orient: "vertical",
            dayLabel: {
              firstDay: 1,
              nameMap: "cn",
            },
            monthLabel: {
              show: false,
            },
            range: "2017-03",
          },
        ],
        series: [
          {
            type: "scatter",
            coordinateSystem: "calendar",
            symbolSize: 1,
            label: {
              show: true,
              formatter: function (params) {
                var d = echarts.number.parseDate(params.value[0]);
                return d.getDate() + "\n\n" + params.value[2] + "\n\n";
              },
              color: "#000",
            },
            data: lunarData,
          },
          {
            type: "scatter",
            coordinateSystem: "calendar",
            symbolSize: 1,
            label: {
              show: true,
              formatter: function (params) {
                return "\n\n\n" + (params.value[3] || "");
              },
              fontSize: 14,
              fontWeight: 700,
              color: "#a00",
            },
            data: lunarData,
          },
          {
            name: "降雨量",
            type: "heatmap",
            coordinateSystem: "calendar",
            data: heatmapData,
          },
        ],
      });
      window.onresize = function () {
        myChart.resize();
      };
    };
    const threelefttop = () => {
      let myChart = echarts.init(document.getElementById("threelefttop"));
      myChart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "90%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "" },
              { value: 735, name: "" },
              { value: 580, name: "" },
              { value: 484, name: "" },
              { value: 300, name: "" },
            ],
          },
        ],
      });
      window.onresize = function () {
        myChart.resize();
      };
    };
    const threeleftbuttom = () => {
      let myChart = echarts.init(document.getElementById("threeleftbuttom"));

      myChart.setOption({
        legend: {
          orient: "vertical",
          left: "left",
          data: ["Prod A", "Prod B", "Prod C", "Prod D", "Prod E"],
        },
        series: [
          {
            name: "Funnel",
            type: "funnel",
            width: "40%",
            height: "45%",
            left: "5%",
            top: "50%",
            funnelAlign: "right",
            data: [
              { value: 60, name: "Prod C" },
              { value: 30, name: "Prod D" },
              { value: 10, name: "Prod E" },
              { value: 80, name: "Prod B" },
              { value: 100, name: "Prod A" },
            ],
          },
          {
            name: "Pyramid",
            type: "funnel",
            width: "40%",
            height: "45%",
            left: "5%",
            top: "5%",
            sort: "ascending",
            funnelAlign: "right",
            data: [
              { value: 60, name: "Prod C" },
              { value: 30, name: "Prod D" },
              { value: 10, name: "Prod E" },
              { value: 80, name: "Prod B" },
              { value: 100, name: "Prod A" },
            ],
          },
          {
            name: "Funnel",
            type: "funnel",
            width: "40%",
            height: "45%",
            left: "55%",
            top: "5%",
            funnelAlign: "left",
            data: [
              { value: 60, name: "Prod C" },
              { value: 30, name: "Prod D" },
              { value: 10, name: "Prod E" },
              { value: 80, name: "Prod B" },
              { value: 100, name: "Prod A" },
            ],
          },
          {
            name: "Pyramid",
            type: "funnel",
            width: "40%",
            height: "45%",
            left: "55%",
            top: "50%",
            sort: "ascending",
            funnelAlign: "left",
            data: [
              { value: 60, name: "Prod C" },
              { value: 30, name: "Prod D" },
              { value: 10, name: "Prod E" },
              { value: 80, name: "Prod B" },
              { value: 100, name: "Prod A" },
            ],
          },
        ],
      });
      window.onresize = function () {
        myChart.resize();
      };
    };
    const chartregions = async () => {
      const response = await EchartsModel.chartregions();
      if (response.data.code == 200) {
        data.chartregions = response.data.data.regions;
      }
    };
    const chartsheets = async () => {
      const response = await EchartsModel.chartsheets(Number(data.tabID));
      if (response.data.code == 200) {
        response.data.data.forEach((v) => {
          config.data.push([
            v.province,
            v.city,
            v.coverage,
            v.receivable,
            v.actual,
            v.balance,
          ]);
        });
      }
    };
    const tab = (id: number) => {
      data.tabID = id;
      chartsheets();
    };
    return {
      ...toRefs(data),
      config,
      tab,
    };
  },
});
</script>
